<!--
 * @Description: 审批人员选择
 * @Author: wangwangwang
 * @Date: 2020-08-07 12:02:33
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-27 11:38:14
-->
<template>
  <el-dialog v-dialogDrag width="50%" :title="title || '选择人员'" :before-close="hanldeClose" :visible.sync="visible">
    <div class="form-container">
      <el-form :inline="true" :model="personTypeForm">
        <el-form-item label="选择类别">
          <el-select v-model="personTypeForm.type">
            <el-option label="组织" value="1"></el-option>
            <el-option label="角色" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-show="personTypeForm.type==='1'">
          <el-input v-model="personTypeForm.person" placeholder="搜索人员"></el-input>
        </el-form-item>
        <el-form-item v-show="personTypeForm.type==='1'">
          <el-button class="bottom_all" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="transfer-container">
      <el-row :gutter="10">
        <el-col :span="9">
          <p class="hanlde-title">未选:</p>
          <div class="hanlde-container">
            <el-tree v-show="personTypeForm.type==='1'" ref="tree" :check-strictly="strictly" check-on-click-node class="tree-line" :indent="0" :data="treeArry" show-checkbox node-key="id" highlight-current :props="defaultProps"></el-tree>
            <el-checkbox-group v-show="personTypeForm.type==='2'" v-model="selectRoles">
              <div v-for="item in rolesData" :key="item.id">
                <el-checkbox :label="item">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="handle-submit">
            <div>
              <el-button class="bottom_all" style="margin-left:0;" @click="setSelectedData">
                <i class="el-icon-arrow-right el-icon--right" />
              </el-button>
            </div>
            <div>
              <el-button class="bottom_all" style="margin-left:0;" @click="cancleSelectedData">
                <i class="el-icon-arrow-left el-icon--left"></i>
              </el-button>
            </div>
            <div>
              <el-button class="bottom_all_two" style="margin-left:0;" @click="clearSelectedData">清空已选</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <p class="hanlde-title">已选:</p>
          <div class="hanlde-container">
            <el-checkbox-group v-model="choisedData">
              <div v-for="item in selectedData" :key="item.id">
                <el-checkbox :label="item">{{item.name}}</el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="bottom_all_two" @click="hanldeClose">取 消</el-button>
      <el-button class="bottom_all" @click="hanldeSure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { queryPage as orgQueryPage } from "@/api/basedata/organization";
import { queryPage as userQueryPage } from "@/api/basedata/user";
import { queryPage } from "@/api/basedata/role";
import { formatTreeData } from "@/utils/utils";

export default {
  props: ["visible", 'choisedDatas', 'title', 'isPerson', 'strictly'],
  data() {
    return {
      personTypeForm: {
        type: "1",
      },
      treeArry: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      selectedData: [],
      choisedData: [],
      selectRoles: [],
      rolesData: [],
      allData: [],
      userList: [],
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (this.choisedDatas ?.length) {
          this.selectedData = this.choisedDatas;
          const newData = this.choisedDatas.map(item => item.id);
          setTimeout(() => {
            this.$refs.tree.setCheckedKeys(newData);
          }, 100)
          return
        }
        this.selectedData = [];
        setTimeout(() => {
          this.$refs.tree.setCheckedKeys([]);
        }, 100)
      }
    },
  },
  methods: {
    /**
     * @Description: 设置已选
     * @Param:
     * @Author: wangwangwang
     */
    setSelectedData() {
      if (this.personTypeForm.type === "1") {
        let selectPerson = this.$refs.tree.getCheckedNodes();
        console.log(selectPerson)
        if (this.isPerson) {
          selectPerson = selectPerson.filter(item => item.organizationId)
        }
        const copyData = selectPerson.map((item) => ({
          name: item.name,
          id: item.id,
          type: item.organizationId ? 1 : 2,
        }));
        const concatData = [...copyData, ...this.selectedData];
        const hash = {};
        const newData = concatData.reduce((item, next) => {
          hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
          return item;
        }, []);
        this.selectedData = newData;
      } else if (this.personTypeForm.type === "2") {
        const copyData = this.selectRoles.map((item) => ({
          name: item.name,
          id: item.id,
          type: 3,
        }));
        const concatData = [...copyData, ...this.selectedData];
        const hash = {};
        const newData = concatData.reduce((item, next) => {
          hash[next.id] ? "" : (hash[next.id] = true && item.push(next));
          return item;
        }, []);
        this.selectedData = newData;
      }
    },
    /**
     * @Description: 取消已选
     * @Param:
     * @Author: wangwangwang
     */
    cancleSelectedData() {
      this.selectedData = this.selectedData.filter(
        (item) => !this.choisedData.some((ele) => ele.id === item.id)
      );
      this.choisedData = [];
    },
    /**
     * @Description: 清除已选
     * @Param:
     * @Author: wangwangwang
     */
    clearSelectedData() {
      this.choisedData = [];
      this.selectedData = [];
    },
    /**
     * @Description: 获取角色数据
     * @Param:
     * @Author: wangwangwang
     */
    initRoleData() {
      const data = {
        page: 1,
        pageSize: 1000,
        userEentrance: "entrance_manager",
      };
      queryPage(data).then((res) => {
        if (res.code === 1001) {
          this.rolesData = res.data.data;
        }
      });
    },
    /**
     * @Description: 获取所有组织和用户、格式化tree结构
     * @Param:
     * @Author: wangwangwang
     */
    initOrganization() {
      const params = {
        page: 1,
        pageSize: 10000,
      };
      orgQueryPage(params).then((res) => {
        if (res.code === 1001) {
          const params2 = {
            page: 1,
            pageSize: 10000,
            userEentrance: "entrance_manager",
          };
          userQueryPage(params2).then((res2) => {
            const orgList = res.data.data//组织
            orgList.forEach((v) => {
              v.type = 2
            })
            const userList = res2.data.data;//用户
            userList.forEach((v) => {
              v.type = 1
            })
            const newArry = userList.map((item) => ({
              ...item,
              parentId: item.organizationId,
            }));
            this.userList = userList;
            this.treeArry = formatTreeData(
              orgList.concat(newArry),
              "id",
              "parentId",
              "children",
              "parent_id"
            );
            this.allData = formatTreeData(
              orgList.concat(newArry),
              "id",
              "parentId",
              "children",
              "parent_id"
            );
          });
        }
      });
    },
    hanldeClose() {
      this.$emit("closeModel");
    },
    hanldeSure() {
      this.$emit("getPerson", this.selectedData);
    },
    /**
     * @Description: 人员搜索
     * @Param: 
     * @Author: wangwangwang
     */
    searchSubmit() {
      if (this.personTypeForm.person) {
        const newData = this.userList.filter(item => item.name.indexOf(this.personTypeForm.person) > -1);
        this.treeArry = newData;
        return
      }
      this.treeArry = this.allData;
    }
  },
  mounted() {
    this.initOrganization();
    this.initRoleData();
  },
};
</script>
<style lang="scss" scoped>
.transfer-container {
  .hanlde-title {
    margin-bottom: 10px;
  }
  .hanlde-container {
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    height: 500px;
    overflow: scroll;
    padding: 15px;
  }
}
.handle-submit {
  padding-top: 200px;
  text-align: center;
  div {
    margin: 20px 0px;
  }
}
</style>
